<template>
  <div class="article-container">
    <!-- 遍历文章内容，根据不同类型渲染不同的格式 -->
    <div class="article-content">
      <div
          v-for="(section, index) in visibleContent"
          :key="index"
          :class="{ 'blurred': !isPremiumUser && index >= visibleSectionsCount }"
      >
        <!-- 根据 section 的类型动态渲染 -->
        <h1 v-if="section.type === 'title'">{{ section.text }}</h1>
        <h2 v-else-if="section.type === 'subtitle'">{{ section.text }}</h2>
        <p v-else-if="section.type === 'paragraph'">{{ section.text }}</p>
        <h3 v-else-if="section.type === 'discribe'">{{ section.text }}</h3>
      </div>
      <div class="demo-rate-block">
        <span class="demonstration" style="font-size: 16px">为这篇文章评分  </span>
        <el-rate v-model="value2" :colors="colors" />
      </div>
    </div>

    <!-- 提示非高级用户模糊部分 -->
    <transition name="fade">
      <div v-if="!isPremiumUser" class="read-more-mask">
        <p class="blurred-text">成为高级用户以阅读完整文章...</p>
        <br>
      </div>
    </transition>

    <!-- 切换用户身份按钮 -->
    <button @click="toggleUserType">
      {{ isPremiumUser ? '切换到普通用户' : '切换到高级用户' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPremiumUser: false,  // 用户是否为高级用户
      value2:0,
      colors:[
        '#99A9BF', '#F7BA2A', '#FF9900'
      ],
      content: [
        {type: 'title', text: '深度学习中常见的8个技巧与方法'},
        {type: 'discribe', text: '作者：Alice'},
        {type: 'discribe', text: '全文共 1324 字，阅读大约需要 10 分钟 '},
        {
          type: 'paragraph',
          text: '本文介绍了8种深度学习中常见的技巧和方法，包括数据增广、图像预处理、网络初始化、训练过程中的技巧、激活函数选择、正则化方法、数据洞察与模型集成等。'
        },

        {type: 'subtitle', text: '1. 数据增广'},
        {
          type: 'paragraph',
          text: '通过水平翻转、位移、裁剪、颜色抖动等方式增加数据量，能提高模型的泛化能力。例如，同时对图像进行旋转和随机尺度变换，并在HSV颜色空间中调整饱和度和明度。'
        },

        {type: 'subtitle', text: '2. 预处理'},
        {type: 'subtitle', text: '2.1 零均值化与标准化'},
        {
          type: 'paragraph',
          text: '零均值化能避免数据均值过大导致的梯度问题，而标准化可以使不同维度的数据分布一致，帮助加速模型的训练。'
        },

        {type: 'subtitle', text: '3. 参数初始化'},
        {
          type: 'paragraph',
          text: '避免参数全为零初始化，使用小的随机数来打破对称性，确保每个神经元的权重更新不同。还可以使用方差归一化来保持输出的稳定性。'
        },

        {type: 'subtitle', text: '4. 训练技巧'},
        {
          type: 'paragraph',
          text: '卷积滤波器的大小最好是3x3，步长为1，并使用0填充来减少参数量，提高网络的准确率。学习率可以从0.1开始，并根据验证集的表现动态调整。'
        },

        {type: 'subtitle', text: '5. 激活函数'},
        {
          type: 'paragraph',
          text: '激活函数用于引入非线性。ReLU函数目前在深度学习中更受欢迎，避免了sigmoid和tanh函数导致的梯度消失问题。'
        },

        {type: 'subtitle', text: '6. 正则化'},
        {
          type: 'paragraph',
          text: '常见的正则化方法包括L2正则化、L1正则化、最大范数约束和Dropout，通过控制模型的复杂度来防止过拟合。'
        },

        {type: 'subtitle', text: '7. 从数据中观察'},
        {
          type: 'paragraph',
          text: '通过观察学习率对loss曲线和精确率曲线的影响，可以判断模型的训练效果。放大loss曲线能够帮助发现合适的学习率和批次大小。'
        },

        {type: 'subtitle', text: '8. 模型集成'},
        {
          type: 'paragraph',
          text: '集成多个模型能够提高整体性能。常见的方法包括使用不同的初始化、交叉验证选择最佳模型，以及组合单个模型的不同训练检查点。'
        }
      ]
    };
  },
  computed: {
    visibleContent() {
      return this.isPremiumUser
          ? this.content
          : this.content.slice(0, Math.ceil(this.content.length / 4));
    },
    visibleSectionsCount() {
      return Math.ceil(this.content.length / 4);
    }
  },
  methods: {
    toggleUserType() {
      this.isPremiumUser = !this.isPremiumUser;
    }
  }
};
</script>

<style scoped>
.article-container {
  max-width: 1000px;
  position: relative;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.article-content {
  transition: filter 1s ease;
}

.blurred {
  filter: blur(5px);
}

.read-more-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.blurred-text {
  font-size: 16px;
  color: #888;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.8 */
{
  opacity: 0;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}
</style>